.heading {
  position: relative;
  scroll-margin-top: calc(var(--spaceOuter) + var(--spaceS));

  @media (--mediaMobile) {
    scroll-margin-top: var(--mobileNavOffset);
  }

  @nest .heading + & {
    margin-top: 0.8em;
  }

  @nest :where(.paragraph, .list, .image) + & {
    margin-top: 1.6em;
  }
}

.headingLink {
  color: rgb(var(--rgbTextLight));
  position: absolute;
  top: 0.6em;
  transform: translate(-100%, -50%);
  padding: var(--spaceS);
  opacity: 0;
  transition: opacity var(--durationS) ease;

  @nest .heading:hover &, &:focus {
    opacity: 1;
  }

  @media (--mediaMobile) {
    padding: 0;
  }
}

.paragraph,
.list {
  --lineHeightBody: 1.7;

  @nest .heading + & {
    margin-top: 1.2em;
  }

  & + & {
    margin-top: 1.4em;
  }

  @media (--mediaMobile) {
    hyphens: auto;
  }
}

.image {
  margin: var(--space2XL) 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  grid-column: 2 / span 3;

  & + & {
    margin-top: 0;
  }

  @media (--mediaTablet) {
    grid-column: 1;
    margin: 60px 0;
  }
}

.code {
  color: var(--colorTextLight);
  background: rgb(var(--rgbText) / 0.08);
  padding: 0.2em 0.6em 0.2em 0.4em;
  font-size: 0.9em;

  --size: 3px;
  --angle: 180deg;
  --mask: #0000 var(--angle), #000 0;

  mask: conic-gradient(white 0 25%, #0000 0 50%, white 0 75%, white 0 75%),
    conic-gradient(
        from calc(var(--angle) / -2 + 135deg) at bottom var(--size) right var(--size),
        var(--mask)
      )
      100% 100% / 50% 51% no-repeat;
}

.pre {
  margin: var(--space3XL) calc(var(--space2XL) * -1);

  & + & {
    margin-top: 0;
  }

  @media (--mediaTablet) {
    margin: var(--space2XL) calc(var(--spaceXL) * -1);
  }

  @media (--mediaMobile) {
    margin: var(--space2XL) calc(var(--spaceOuter) * -1);
  }
}

.hr {
  margin: var(--space4XL) 0;
  border: 0;
  border-top: 1px solid rgb(var(--rgbText) / 0.1);

  @media (--mediaTablet) {
    margin: var(--space3XL) 0;
  }

  @media (--mediaMobile) {
    margin: var(--space2XL) 0;
  }
}

.blockquote {
  margin: var(--space3XL) 0;
  padding: 0.8em 0 0.8em 2em;
  border-left: 2px solid rgb(var(--rgbAccent));
  color: var(--colorTextLight);

  & > :where(.paragraph, .list) {
    color: inherit;
  }

  @media (--mediaTablet) {
    margin: var(--space2XL) 0;
  }

  @media (--mediaMobile) {
    margin: var(--space2XL) 0;
  }
}

.strong {
  font-weight: var(--fontWeightBold);
}

.embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  grid-column: 2 / span 3;
  margin: var(--space3XL) 0;

  @nest .pre + &, & + & {
    margin-top: 0;
  }

  & iframe {
    border: 0;
    width: 100%;
    height: 100%;
  }

  @media (--mediaTablet) {
    grid-column: 1;
    margin: var(--space2XL) 0;
  }
}
